import React, { Component } from "react";
import PropTypes from "prop-types";
import F2Canvas from "../F2Canvas";
import F2 from "@antv/f2";

export default ({ data, id, xField, yField, color }) => {
  const initChart = (config) => {
    const chart = new F2.Chart(
      Object.assign(config, {
        appendPadding: [10, 15, 10, 15],
        // 预留展示tooltip高度
        padding: [40, "auto", "auto"],
      })
    );

    // Step 2: 载入数据源
    chart.source(data);

    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart
      .interval()
      .position(`${xField}*${yField}`)
      .color(color || "#2FC25B");

    // Step 4: 渲染图表
    chart.render();
  };
  return (
    <F2Canvas
      id={id}
      style={{ width: "100%", height: "200px" }}
      onInit={initChart}
    ></F2Canvas>
  );
};
